<script setup>
import _ from 'lodash';
import {computed, onMounted, reactive, toRefs, watch} from "vue";
import {isGroup, isApp, isMbRoot, canEdit} from './common.js';

import {useCommonStore} from "@jzl/stores";
import {$jui, $utils} from '@jzl/utils'
import {api} from "@jzl/api";

const DEFAULT_FORM = {
  mb_code: '',
  mb_group_id: -1,
  type: 'LIST',
  app_id: -1,
  name: '',
  alias: '',
  remark: '',
  enable_times: []
}

const emit = defineEmits(['close']);
const props = defineProps({
  actionType: {
    type: String,
    default: 'view'
  },
  currentData: {
    type: Object,
    default: () => {
    }
  }
})

const {
  loading,
  // actionType,
  form,
  rules,
  // expandedKeys,
  // formSelectWinName
} = toRefs(reactive({
  loading: false,
  // actionType: 'view',
  form: _.cloneDeep(DEFAULT_FORM),
  rules: {
    mb_code: [
      {required: true, message: '请输入码值', trigger: 'blur'}
    ],
    name: [
      {required: true, message: '请输入名称', trigger: 'blur'}
    ]
  },
  // expandedKeys: [],
  // formSelectWinName: '选择表单'
}))

const isMbCreate = computed(() => {
  return form.value?.parent_id === -1;
})

watch(() => [props.actionType, props.currentData], () => {
  init()
}, {deep: true});

onMounted(() => {
  init();
})

const init = () => {
  let iForm = null;

  let parent_id = -1;
  let mb_group_id = _.get(props.currentData, 'mb_group_id', -1);
  let app_id = _.get(props.currentData, 'app_id', -1);
  let type = _.get(props.currentData, 'type', 'LIST');

  if (props.actionType === 'create') {  // 创建码表
    if (isGroup(props.currentData)) {    // group
      mb_group_id = _.get(props.currentData, 'mb_group_id', -1);
    } else if (isApp(props.currentData)) {     // app
      mb_group_id = -1;
      app_id = _.get(props.currentData, 'id');
    }

    type = 'LIST';
  } else if (props.actionType === 'createOption') {         // 码表后面添加选项
    parent_id = _.get(props.currentData, 'mb_id');
  } else if (props.actionType === 'createOptionBefore') {   // 选项前添加选项
    parent_id = _.get(props.currentData, 'parent_id');
  } else if (props.actionType === 'createOptionChild') {    // 选项下添加选项
    parent_id = _.get(props.currentData, 'mb_id');
  } else if (props.actionType === 'edit') {                 // 修改
    iForm = _.cloneDeep(props.currentData);
    ;
  } else {
    $jui.toast('操作不正确！');
    return;
  }

  if (!iForm) {
    iForm = {
      project_id: useCommonStore().project?.project_id,
      parent_id: parent_id,
      mb_code: $utils.getNanoid(),
      mb_group_id: mb_group_id,
      type: type,
      app_id: app_id,
      name: '',
      alias: '',
      remark: '',
      enable_times: []
    }
  }

  form.value = iForm;
}

const handleSubmitCreateMb = async () => {

  let data = _.cloneDeep(form.value);
  let times = data.enable_times;
  let enable_time_start = '';
  let enable_time_end = '';

  if (times && times.length >= 2) {
    enable_time_start = times[0];
    enable_time_end = times[1];
  }

  data.enable_time_start = enable_time_start;
  data.enable_time_end = enable_time_end;

  loading.value = true;

  let ret = null;
  if (form.value.mb_id) {
    ret = await api.mb.updateMb(data);
  } else {
    ret = await api.mb.createMb(data);
  }

  // 创建完，排个序
  if (props.actionType === 'createOptionBefore' && ret && ret.mb_id) {
    await api.mb.moveToPosition(ret.mb_id, props.currentData.mb_id, 'before');
  }

  loading.value = false;

  if (ret) {
    $jui.toast('操作成功！');
    handleCancel(true);
  }
}

const handleCancel = (flag) => {
  // props.actionType = 'view';
  emit('close', flag);
}

</script>

<template>
  <el-form
    ref="formRef"
    label-width="90px"
    :model="form"
    :rules="rules">
    <el-form-item
      label="码表类型"
      v-if="isMbCreate">
      <el-select
        v-model="form.type"
        placeholder="请选择码表类型"
        :disabled="actionType === 'edit' && form.type === 'TREE'">
        <el-option label="列表" value="LIST"></el-option>
        <el-option label="树型" value="TREE"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item
      label="码值">
      <el-input
        v-model="form.mb_code"
        :disabled="actionType === 'edit'"
      ></el-input>
    </el-form-item>
    <el-form-item label="名称">
      <el-input
        v-model="form.name"
        :disabled="actionType === 'view'"
      ></el-input>
    </el-form-item>
    <el-form-item label="码值别名">
      <el-input
        v-model="form.mb_code_alias"
        :disabled="actionType === 'view'"
      ></el-input>
    </el-form-item>
    <el-form-item label="名称别名">
      <el-input
        v-model="form.alias"
        :disabled="actionType === 'view'"
      ></el-input>
    </el-form-item>
    <el-form-item label="有效时间" v-if="isMbCreate">
      <el-date-picker
        v-model="form.enable_times"
        type="datetimerange"
        range-separator="至"
        start-placeholder="生效开始日期"
        end-placeholder="生效结束日期"
        :disabled="actionType === 'view'">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="备注">
      <el-input type="textarea" :rows="2" v-model="form.remark"></el-input>
    </el-form-item>
    <el-form-item label="">
      <el-button
        type="primary"
        size="default"
        @click="handleSubmitCreateMb()"
      > 提交
      </el-button>
      <el-button
        size="default"
        @click="handleCancel()"
      > 取消
      </el-button>
    </el-form-item>
  </el-form>
</template>
